import React, {
  useState,
} from "react";
import { Modal } from "antd";
import Scrollbars from "react-custom-scrollbars";
import "./index.scss";
/**
* 传参：
* title: 弹出框名称
* width: 弹出框宽度
* height: 弹出框内容区域高度
* children: 弹出框内容区域（即Modal组件含有的子元素，不需要手动传参）
* visible: 弹出框显隐
* changeVisible：控制弹出框显隐函数
* onOk：确认函数
* onCancel: 取消函数
* className：弹窗类名
* noFooter: 不显示默认弹窗底部
*/
function MyModal(props) {
  let {
      title,
      width,
      height,
      children,
      visible,
      changeVisible,
      onOk,
      onCancel,
      className,
      noFooter,
      bodyStyle,
      showAlert,
      loadVisible,
      zIndex
  } = props;
  const [tipShow, setTipShow] = useState(false);
  const confirm = () => {
      if(loadVisible){
          return;
      }
      typeof onOk === "function" && onOk();
      // changeVisible(false);
  }
  const cancel = () => {
      if(loadVisible){
          return;
      }
      typeof onCancel === "function" && onCancel();
      // if(tipShow){
      //     dispatch({
      //         type: "SHOW_ALERT",
      //         data: true
      //     })
      // } else {
      //     changeVisible(false);
      // }
      changeVisible(false);
  }
  return (
      <Modal
          title={title}
          visible={visible}
          onOk={()=>changeVisible(true)}
          onCancel={cancel}
          footer={null}
          centered={true}
          width={width}
          height={height}
          destroyOnClose={true}
          zIndex={zIndex? zIndex: ""}
          className={`my_modal ${className? className: ""}`}
          // bodyStyle={bodyStyle? bodyStyle: {height: height + 'px'}}
      >
          {
              noFooter?
             children:
              <Scrollbars autoHeight autoHeightMax={height - 95}>
                  <div className="body_container clear" style={{minHeight: height - 95}} onClick={()=>setTipShow(true)}>{children}</div>
              </Scrollbars>
          }
          {
              noFooter?
              "":
              <div className="modal_footer">
                  <div className="confirm_btn" onClick={confirm}>确定</div>
                  <div className="cancel_btn" onClick={cancel}>取消</div>
              </div>
          }
      </Modal>
  )
}

export default MyModal;
